@charset "utf-8";
body,h2,p{
	margin:0;
	padding:0;
	}
a{
	text-decoration:none;
	}
ol li{
	list-style:none;
}
.main{
	width:400px;
	margin:0 auto;
	text-shadow:0 1px 0 rgba(255,255,255,0.5);/*文字阴影*/
	}
.list_one,
.list_two,
.list_three{
	counter-reset:li;/*设置li选择器出现次数的计数器的值*/
	margin-bottom:50px;
	padding:0;
	}
/*--样式一--*/		
.list_one a{
	display:block;
	position:relative;
	margin:7px 0;
	padding:6px 30px;
	background:#ddd;
	color:#444;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-khtml-border-radius:6px;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;	
	}
.list_one a:hover{
	background:#eee;
	}
.list_one a::before{
	counter-increment:li;
	content:counter(li);
	display:block;
	position:absolute;
	top:-4px;
	left:-21px;
	width:30px;
	height:30px;
	border:5px solid #fff;
	background:#099;
	border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	-khtml-border-radius:20px;
	text-align:center;
	line-height:31px;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
	}
.list_one a:hover::before{
	-moz-transform:rotate(360deg);/*360度旋转*/
	-webkit-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
	}
	
/*--样式二--*/
.list_two a{
	display:block;
	position:relative;
	margin:7px;
	padding:6px 10px;
	background:#ddd;
	color:#444;
	text-decoration:none;
	-moz-transition:background 0.5s ease;
	}
.list_two a:hover{
	background:#eee;
	}
.list_two a::before{
	content:counter(li);
	counter-increment:li;
	display:block;
	position:absolute;
	left:-40px;
	top:0;
	width:32px;
	height:32px;
	color:#FFF;
	background:#F60;
	text-align:center;
	line-height:32px;
	}	
.list_two a::after{
	content:"";
	display:inline-block;
	position:absolute;
	top:9px;
	left:-16px;/*三角形出现的起始位置*/
	width:0;
	height:0;
	border:6px solid transparent;
	-moz-transition:border-left-color 1s ease,
	               left 0.5s ease;
	}
.list_two a:hover::after{
	border-left-color:#f60;
	left:-8px;/*最终三角形的位置*/
	}

/*--样式三--*/	
.list_three li{
	padding:30px;
	border-bottom:1px dashed #ccc;
	}
.list_three  h2{position:relative;}	
.list_three h2::before{/*设置序号样式*/
	counter-increment:li;
	content:counter(li);
	display:block;
	position:absolute;
	top:-15px;
	left:-32px;
	width:35px;
	height:35px;
	border:1px solid #ccc;
	border-radius:18px;
	-moz-border-radius:18px;
	-webkit-border-radius:18px;
	-khtml-border-radius:18px;
	color:#BBB;
	background:#EEE;
	text-align:center;
	line-height:32px;
	z-index:-1;
	-moz-transition:all 0.5s ease;
	}
.list_three li:hover h2::before{
	-moz-transform:scale(1.3);
	border:3px solid #F90;
	background:#FC9;
	font-size:24px;
	color:#000;
	border-radius:40px;
	}